<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Vue页面结构</title>
    <script src="./lib/vue-2.4.0.js"></script>
    <link rel="stylesheet" href="./lib/bootstrap-3.3.7.css">
</head>
<body>
    <div id="app" class="container">
        <div class="alert alert-success">
            <form class="form-inline">
                <div class="form-group">
                <label for="search">搜索:</label>
                <input type="text" class="form-control" id="search" placeholder="品牌" v-model='keyword'>
                </div>
            </form>
        </div>
        <div>
                <table class="table table-striped table-bordered table-hover">
                    <thead>
                        <tr><th>编号</th><th>品牌</th><th>国家</th></tr>
                    </thead>
                    <tbody>
                        <tr v-for="(item,key) in newlist">
                            <td>{{item.id}}</td>
                            <td>{{item.brand}}</td>
                            <td>{{item.country}}</td>
                        </tr>
                    </tbody>
                </table>
        </div>
    </div>
</body>
<script>
    
    var vm=new Vue({
        el:'#app',
        data:{
            list:[
                {id:1,country:'德国',brand:'奔驰'},
                {id:2,country:'意大利',brand:'法拉利'},
                {id:3,country:'美国',brand:'林肯'},
                {id:4,country:'中国',brand:'红旗'}
            ],
            keyword:''
        },
        computed:{
            newlist(){
                return this.list.filter((item,index)=>{
                    return item.brand.indexOf(this.keyword)!==-1;
                });
            }
        },
        methods:{

        },
        //生命周期函数
        created:function(){
            // console.log(this.list,this.newlist);
        },
        mounted:function(){
        }
    });
</script>
</html>